<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//cdn.66173.cn/www/js/jquery-1.8.3.min.js"></script>
    <title>Title</title>
</head>
<style>
    .num{
        width: 300px;height:70px;line-height: 70px;font-size: 30px;border: 1px solid green;
    }
</style>
<body>
<div class="main" style="overflow:auto;border: 1px solid blue;margin: 30px auto;width:100%">
    <div class="child" style='border:1px solid red;margin-top:40px;color:grey;' >
        <img style="width:100%;height:50%;" src="" alt="">
        <p class="num" style="color: red"></p>
    </div>
</div>
</body>
<script  type="text/javascript">
    $(document).ready(function(){
        scroll();
        getScrollHeight()
    });
    $(document).scroll(function () {
        getScrollHeight()
    })
    function nn() {
        var len=$('.num').length;
        console.log(len+"熊大")
        var arr1=[];
        for(var i in 20){
            if(i<=20){
                arr1.push(i);
                for (j=1,j<arr1.length;j++;){
                    $(".num").html(arr1[j])
                }
                i++;
                console.log(i)
            }else{
                // $('.num').html('没有更多了');
                $(".main").unbind("scroll")
            }
        }
    }
    function scroll() {
        var h= document.body.clientHeight;
        $(".main").css("height",h)
        $(".child").css("height",1.1*h)
        $(".main").unbind("scroll").bind("scroll", function(e){
            var sum = this.scrollHeight;
            if ($(this).scrollTop() + $(this).height()<=4*h) {
                $(".main").append($(".child").clone());
            }
        });
        nn()
    }
    function getScrollHeight(){
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        return scrollTop;
        constructor.log(scrollTop)
        console.log("dddddddddddddd")
    }
</script>

</html>